<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box">1</div>
  <div class="box">2</div>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
  <div>4</div>
  <div class="demo">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <span>我是span</span>
      <li>6</li>
      <li>7</li>
      <li class="chosen">8</li>
      <li>9</li>
    </ul>
  </div>

  <script src="./jquery/jQuery.min.js"></script>
  <script>
    /* 
      jQuery 的选择器
        + 包含两个部分
          1. 选择器：对元素的获取
            - 基本选择器
            - 特殊选择器
          2. 筛选器：对已经获取的元素集合进行二次筛选

        + 选择器
          1. 基本选择器
            + 语法： $(选择器) ，css如何捕获标签，括号里就怎么填写
            + 返回值： 满足条件的所有元素（id 选择器除外），以一个集合的形式，放在一个数组
          2. 特殊选择器
            + 语法： $(选择器)
            + 对已经存在的选择器进行修饰
              - :first
              - :last
              - :eq(数字) :获取指定索引的元素，从 0 开始
              - :odd :按照索引排列的奇数个
              - :even :按照索引排列的偶数个
          3. 筛选器
            + 对jQuery 的元素集合进行二次筛选，注意：原生 dom 对象不能使用
            + 直接进行链式编程即可
            + 语法：$().筛选器()
              - .first() : 获取元素集合第一个元素
              - .last() : 获取元素集合最后一个元素
              - .eq(数字) : 获取元素集合指定索引的元素，从 0 开始
              - .next() : 获取元素集合中指定元素的下一个元素
              - .nextAll() : 获取元素集合中指定元素之后的所有元素
              - .nextAll(选择器) : 获取元素集合中指定元素之后的选中元素的那一个
              - .nextUntil() : 获取元素集合中指定元素之后的所有元素
              - .nextUntil(选择器) : 获取元素集合中指定元素之后的所有元素，直到遇到指定元素为止(前后都不包含)
              - .prev() : 获取元素集合中指定元素的前一个元素
              - .prevAll() : 获取元素集合中指定元素之前的所有元素
              - .prevAll(选择器) : 获取元素集合中指定元素之前的选中元素的那一个
              - .prevUntil() : 获取元素集合中指定元素之前的所有元素
              - .prevUntil(选择器) : 获取元素集合中指定元素之前的所有元素，直到遇到指定元素为止(前后都不包含)
              - .parent() : 获取当前元素的父元素
              - .parents() : 获取当前元素的所有的祖先元素
              - .parents(选择器) : 获取当前元素的所有的祖先元素里的那一个
              - .children() : 获取当前元素的所有的子元素
              - .children(选择器) : 获取当前元素的所有的子元素里的那一个
              - .siblings() : 获取当前元素的所有兄弟元素，自己除外
              - .find(选择器) : 获取当前元素的所有后代元素里符合选择器条件的元素
              - .index() : 获取当前元素在当前元素集合中的索引，从 0 开始
    */
    //  基本选择器
    /* console.log($('div'));
    console.log($('#box'));
    console.log($('.box'));
    console.log($('ul > li:nth-child(odd)')); */

    //  特殊选择器
    /* console.log($('div:first'));
    console.log($('div:last'));
    console.log($('div:eq(1)'));
    console.log($('li:odd')); //js
    console.log($('li:nth-child(odd)')); //css */

    // 筛选器
    console.log($('.demo > ul > li').first());
    console.log($('.demo > ul > li').last());
    console.log($('.demo > ul > li').eq(2));
    console.log($('.demo > ul > span').next());
    console.log($('.demo > ul > span').nextAll());
    console.log($('.demo > ul > span').nextAll('.chosen'));
    console.log($('.demo > ul > span').nextUntil());
    console.log($('.demo > ul > span').nextUntil('.chosen'));
    console.log($('.demo > ul > span').prev());
    console.log($('.demo > ul > span').parent());
    console.log($('.demo > ul > span').parents());
    console.log($('.demo > ul > span').parents('body'));
    console.log($('.demo > ul').children());
    console.log($('.demo > ul > span').siblings());
    console.log($('body').find('span'));
    console.log($('.demo > ul > .chosen').index());

  </script>
</body>

</html>